<template>
    <div>
        <div>
            <el-input style="width: 200px" placeholder="输入用户名" v-model="username"></el-input>
            <el-input style="width: 200px; margin: 0 5px" placeholder="输入姓名" v-model="name"></el-input>
            <el-button type="primary" @click="load">查询</el-button>
        </div>
        <div style="margin: 10px 0">
            <el-button type="primary" plain @click="handleAdd">新增</el-button>
            <el-button type="danger" plain @click="delBatch">批量删除</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column  prop="id" label="序号"></el-table-column>
            <el-table-column  prop="username" label="用户名"></el-table-column>
            <el-table-column  prop="name" label="姓名"></el-table-column>
            <el-table-column  prop="phone" label="手机号码"></el-table-column>
            <el-table-column  prop="email" label="邮箱"></el-table-column>
            <el-table-column  prop="address" label="地址"></el-table-column>
            <el-table-column  label="头像">
                <template v-slot="scope">
                    <el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px; height: 50px; border-radius: 50%" :preview-src-list="[scope.row.avatar]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template v-slot="scope">
                    <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="mini" type="warning" plain @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="total"></el-pagination>
        </div>

        <!--新增/修改-->
        <el-dialog title="新增用户" :visible.sync="formvisible" width="30%">
            <el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
                <!--                <div style="margin: 15px; text-align: center">

                                </div>-->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="邮箱"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input type="textarea" v-model="form.address" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            :headers="{token:user.token}"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            action="http://localhost:8099/file/upload">
                        <el-button type="primary">上传头像</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="formvisible=false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "UserView",
        data(){
            return {
                tableData: [],
                username:'',
                name:'',
                pageNum:1,
                pageSize:5,
                total: 0,
                formvisible: false,
                form: {},
                ids: [],
                user: JSON.parse(localStorage.getItem("my-user") || "{}"),
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur'}
                    ]
                },
            }
        },
        mounted() {
            this.load()
        },
        methods: {
            // 获取数据
            load() {
                this.$request.get('/user/selectpage', {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        username: this.username,
                        name: this.name
                    }
                }).then(res=>{
                    console.log(res)
                    this.tableData = res.data.list
                    this.total = res.data.total
                })
            },
            handleCurrentChange(pageNum){
                this.pageNum = pageNum
                this.load()
            },
            handleAvatarSuccess(){

            },
            save(){
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.$request({
                            url:this.form.id ? '/user/update': '/user/add',
                            method: this.form.id ? 'PUT': 'POST',
                            data: this.form
                        }).then(res => {
                            if (res.code==='200') {
                                this.$message.success('保存成功')
                                this.load()
                                this.formvisible = false
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                })
            },
            // 新增
            handleAdd(){
                this.form = {}
                this.formvisible = true
            },
            // 编辑
            handleEdit(row){
                this.form = JSON.parse(JSON.stringify(row))
                this.formvisible = true
            },
            del(id){
                this.$confirm('您确认删除吗？', '确认删除', {type: "warning"}).then(res=>{
                    this.$request.delete('/user/deleteOne/'+id).then(res2=>{
                        if(res2.code==='200') {
                            this.$message.success('操作成功')
                            this.load()
                        }else{
                            this.$message.error(res2.msg)
                        }
                    }).catch(()=>{})
                }).catch(()=>{})
            },
            handleSelectionChange(rows){
                this.ids = rows.map(v=>v.id)
            },
            // 批量删除
            delBatch(){
                if(!this.ids.length) {
                    this.$message.warning('请选择数据')
                    return
                }
                this.$confirm('您确认批量删除这些数据吗？', '确认删除', {type:"warning"}).then(response=>{
                    this.$request.delete('/user/deleteMany', {
                        data: this.ids
                    }).then(res=>{
                        if (res.code==='200') {
                            this.$message.success('操作成功')
                            this.load()
                        }else{
                            this.$message.error(res.msg)
                        }
                    })
                }).catch(()=>{})
            }
        }
    }
</script>

<style scoped>

</style>